<template>
  <view class="u-center">
    <view class="header-img">
      <!-- 宝宝信息 -->
      <view class="baby-info">
        <!-- 头像+名称+年龄 -->
        <view class="baby">
          <u-image
            width="153rpx"
            height="153rpx"
            :src="vuex_babyInfo.avatar"
            shape="circle"
            :lazy-load="true"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>

          <view class="baby-i">
            <view class="baby-name">{{ vuex_babyInfo.name }}</view>
            <!-- 性别 -->
            <view>
              <view> 性别：</view>
              <view>{{ vuex_babyInfo.sex == "1" ? "男" : "女" }}</view>
            </view>
            <!-- 年龄 -->
            <view>
              <view style="margin-right: 2rpx"> 年龄：</view>
              <view>{{ detailAge(vuex_babyInfo.birthday) }}</view>
            </view>
          </view>
        </view>
        <!-- 期末报告 -->
        <view class="report" >
          <view class="title"> 期末报告</view>
          <view v-show="updateTimeShow"> 更新时间:{{ updateTime1(vuex_babyInfo.updated_at) }}</view>
        </view>
      </view>

      <!-- 选择日期 -->
      <view class="pick-time">
        <view class="choose-time">
          <view>选择日期：</view>
          <view @click="show = true">{{ year }}</view>
          <view @click="show = true">{{ month }}</view>
        </view>
        <view class="save" @click="saveEwm">
          <image src="@/static/report/download.png" class="image" />
          <view>保存到手机</view>
        </view>
      </view>

      <view :class="['the-report']" v-if="userInfo.hasOwnProperty('img')">
        <image :src="userInfo.img" @click="preImage" />
      </view>
      <view v-else class="nodata"> 暂无数据... </view>

      <u-button
        open-type="openSetting"
        @opensetting="handleSetting"
        v-if="!openSettingBtnHidden"
        type="success"
        >抱歉您已拒绝相册保存，请点击这里开启</u-button
      >
    </view>

    <!-- 时间选择 -->
    <u-picker
      mode="time"
      v-model="show"
      :end-year="endYear"
      start-year="2016"
      :params="params"
      @confirm="timeChange"
    ></u-picker>
  </view>
</template>

<script>
var _self;
import { getGrowAge, format1 } from "@/common/utils";
export default {
  data() {
    return {
      openSettingBtnHidden: true, //是否授权
      ewmImg: "", //这是要保存的图片
      show: false,
      endYear: "",
      year: "", //当年年份
      month: "",
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      userInfo: {},
	  // 更新时间
	  updateTimeShow:false
    };
  },
  methods: {
    /**
     * 获取报告
     */
    getReportInfo() {
      this.userInfo = {};
      var form = {
        baby_id: this.vuex_babyInfo.baby_id,
        month: this.year + "-" + this.month,
      };
      this.$u.api.getReportApi(form).then((res) => {
        this.userInfo = res.data;
		this.updateTimeShow = true
      });
    },

    /**
     * 年龄
     */
    detailAge(age) {
      return getGrowAge(age);
    },
    /**
     * 更新时间
     */
    updateTime(time) {
      return format(time);
    },

    updateTime1(time) {
      return format1(time);
    },

    /**
     * 预览图片
     */
    preImage() {
      uni.previewImage({
        urls: [this.userInfo.img],
      });
    },

    /**
     * 选择时间
     */
    timeChange(e) {
      this.year = e.year;
      this.month = e.month;
      this.getReportInfo();
    },

    //微信小程序保存到相册
    handleSetting(e) {
      if (!e.detail.authSetting["scope.writePhotosAlbum"]) {
        _self.openSettingBtnHidden = false;
      } else {
        _self.openSettingBtnHidden = true;
      }
    },
    saveEwm() {
      if (this.userInfo.hasOwnProperty("img")) {
        uni.authorize({
          scope: "scope.writePhotosAlbum",
          success: (res) => {
            uni.showLoading({
              mask: true,
            });
            uni.downloadFile({
              url: this.userInfo.img,
              success: function (res) {
                uni.hideLoading();
                if (res.statusCode == 200) {
                  let filePath = res.tempFilePath;
                  uni.saveImageToPhotosAlbum({
                    filePath: filePath,
                    success: function () {
                      uni.showToast({
                        title: "保存成功",
                        icon: "none",
                      });
                    },
                    fail: function () {
                      uni.showToast({
                        title: "保存失败，请稍后重试",
                        icon: "none",
                      });
                    },
                  });
                }
              },
            });
          },
          fail: (err) => {
            this.openSettingBtnHidden = false;
          },
        });
      } else {
        uni.showToast({
          title: "暂无报告",
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
  onLoad() {
    _self = this;
    var date = new Date();
    this.endYear = date.getFullYear();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.getReportInfo();
  },
};
</script>

<style scoped lang ='scss' >
.u-center {
  background-color: #f7f7f7;
  min-height: 100vh;
  color: #666666;

  .header-img {
    /* background-image: url("@/static/index/header.png"); */
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 50rpx 20rpx;
    height: auto;
    .baby-info {
      height: 220rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 18 * 2rpx 15.5 * 2rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .baby {
        display: flex;
        flex-direction: row;
        align-items: center;
        .baby-i {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          .baby-name {
            /* color: #000000; */
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          & > view:nth-child(2),
          & > view:nth-child(3) {
            display: flex;
            flex-direction: row;
            align-items: center;
            /* color: #000000; */
            font-size: 24rpx;
            margin-bottom: 5rpx;
          }
        }
      }
      .report {
        color: #666666;
        .title {
          font-size: 36rpx;
          padding: 0 5rpx;
          border-left: 5px solid #07c38f;
          border-radius: 5rpx;
          margin-bottom: 10rpx;
        }
        .title:before {
          content: "";
          position: relative;
          left: 0;
          top: 6%;
          bottom: auto;
          right: auto;
          height: 20rpx;
          width: 5px;
          background-color: #a89d9e;
        }
        & > view:nth-child(2) {
          font-size: 24rpx;
          color: #666666;
          margin-top: 30rpx;
        }
      }
    }
    .pick-time {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 30rpx 0;
      & > view {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .choose-time {
        & > view:nth-child(2) {
          width: 45px;
          margin-right: 5px;
          height: 22px;
          border: 1rpx solid #07c38f;
          text-align: center;
          border-radius: 20rpx;
          line-height: 22px;
          color: #07c38f;
        }
        & > view:nth-child(3) {
          width: 41px;
          margin-right: 5px;
          height: 22px;
          border: 1rpx solid #07c38f;
          border-radius: 20rpx;
          text-align: center;
          line-height: 22px;
          color: #07c38f;
        }
      }
      .save {
        color: #07c38f;
        .image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 5rpx;
        }
      }
    }
    .the-report {
      /* background: rgba(216, 216, 216, 1); */
      /* height: 331px; */
      border-radius: 10rpx;
      text-align: center;
      overflow-y: scroll;
      margin-bottom: 50rpx;
    }
    .nodata {
      background: rgba(216, 216, 216, 1);
      height: 331px;
      line-height: 331px;
      border-radius: 10rpx;
      text-align: center;
      margin-bottom: 50rpx;
    }
  }
}
</style>
